<script setup></script>

<template>
  <el-skeleton :loading="loading" animated :count="3">
    <template #template>
      <div style="flex: 1">
        <el-skeleton-item variant="image" style="height: 240px" />
        <div style="padding: 14px">
          <el-skeleton-item variant="h3" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 16px;
              height: 16px;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </div>
    </template>

    <template #default>
      <el-space
        class="card-list"
        style="
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          justify-content: center;
        "
      >
        <el-card
          v-for="item in lists"
          :key="item.name"
          :body-style="{ padding: '15px' }"
          style="width: 32%; margin-bottom: 16px"
        >
          <img :src="item.imgUrl" style="width: 100%; display: block" />
          <div style="padding: 14px">
            <span>{{ item.name }}</span>
            <div class="bottom card-header">
              <div class="time">{{ currentDate }}</div>
              <el-button text class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-space>
    </template>
  </el-skeleton>
</template>

<style scoped></style>
